<template>
	<view class="containe fs-28 pb-100">
		<view class="p-24 bg-page sticky-tabs">
			<view class="dis-flex center bg-white radius-30">
				<text class="iconfont icon-sousuo fs-30 se-thin-txt pl-30 pr-20"></text>
				<input v-model="pageData.word" placeholder="请输入" class="lh-80 flex-full fs-28" @confirm="searchDevice" />
				<text v-if="pageData.word" class="iconfont icon-close fs-34 se-normal-txt plr-20" @click="clearWord"></text>
			</view>
		</view>
		<view class="plr-24" v-if="pageData.list.length>0">
			<view class="bg-white p-20 box-shadow radius-10 pos-r" v-for="(li,i) in pageData.list" :key="i" :class="i>0?'mt-24':''">
				<view class="dis-flex center">
					<view class="flex-full">
						<view class="fs-32">名称：<text class="can-select">{{li.name}}</text></view>
						<view class="ptb-10">iccid：<text class="can-select">{{li.iccid||'--'}}</text></view>
						<view class="ptb-10">imei：<text class="can-select">{{li.deviceCode}}</text></view>
						<view class="ptb-10">productKey：<text class="can-select">{{li.productKey}}</text></view>
						<view class="ptb-10">deviceName：<text class="can-select">{{li.deviceName}}</text></view>
						<view class="ptb-10">信号：<text>{{li.signal?`${li.signal}dbm`:'--'}}</text></view>
						<view>电量：<text>{{li.battery?`${li.battery}%`:'--'}}</text></view>
					</view>
					<view class="dis-flex center pl-20">
						<text :class="Util.parseDeviceStatusClass(li.status)">{{Util.parseDeviceStatusTxt(li.status)}}</text>
						<!-- <text class="iconfont icon-jt-r fs-24 se-thin-txt pl-10"></text> -->
					</view>
				</view>
				<view class="pos-a right-16 bottom-16">
					<button class="link-btn none-bg no-border fs-28 m-0 se-blue w-200" @click="toInfo(li.id)">设备详情</button>
				</view>
			</view>
			<uni-load-more v-if="pageData.list.length>10" :status="loadStatus"></uni-load-more>
		</view>
		<empty v-else height="40vh" tips="暂无设备"></empty>
		<button class="pos-f right-16 radius-50p btn-primary" style="bottom:20%;" @click="showAddForm">
			<text class="iconfont icon-tianjia_icon"></text>
		</button>
		<popup position="bottom" :tap-mask-hide="false" ref="addFormRef">
			<view class="w-full bg-white radius-top-20">
				<view class="dis-flex center ptb-15 bb-bar-thin">
					<button class="link-btn no-border none-bg se-normal-txt fs-26 m-0" @click="closeAddForm">关闭</button>
					<text class="fs-30 f-bold se-black">添加设备</text>
					<button class="link-btn no-border none-bg se-blue fs-26 m-0" @click="confirmAddForm">确定</button>
				</view>
				<view class="pt-10 pb-30 plr-40">
					<view class="pt-20" v-for="(input,i) in deviceForm.inputs" :key="i">
						<view class="se-normal-txt pb-10 fs-28"><text class="se-red" v-if="input.require">*</text>{{input.name}}：</view>
						<input class="bg-page w-100p lh-80 h-80 fs-28 p-20 radius-8" :placeholder="`请输入${input.name}`" v-model="deviceForm.formData[input.key]">
					</view>
				</view>
			</view>
		</popup>
	</view>
</template>

<script setup>
	import {ref,reactive, getCurrentInstance} from 'vue';
	import { onReachBottom,onLoad } from '@dcloudio/uni-app'
	import UniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import Empty from '@/components/empty.vue';
	import Popup from '@/components/popup.vue';
	import Util from '@/common/util.js'
	
	const {proxy} = getCurrentInstance();
	
	let loadStatus=ref('loading');
	let pageData=reactive({
		word:'',
		list:[],
		page:1,
		size:10,
		totalPage:0
	});
	let deviceForm=reactive({
		formData:{
			name:'',
			iccid:'',
			deviceCode:'',
			productKey:'k0nrte7RMU7',
			deviceName:'',
			deviceSecret:''
		},
		inputs:[
			{name:'名称',key:'name',require:true},
			{name:'iccid',key:'iccid',require:false},
			{name:'imei',key:'deviceCode',require:true},
			{name:'productKey',key:'productKey',require:true},
			{name:'deviceName',key:'deviceName',require:true},
			{name:'deviceSecret',key:'deviceSecret',require:true},
		]
	})
	
	function toInfo(id){
		uni.navigateTo({
			url:'/pages/index/info?id='+id
		})
	}
	
	function searchDevice(){
		pageData.page=1;
		getDeviceList()
	}
	function clearWord(){
		pageData.word='';
		searchDevice()
	}
	function getDeviceList(){
		let {page,size,word}=pageData;
		let data={page,size};
		if(word){
			data.searchName=word
		}
		Util.ajaxGet('/api/blDevice/deviceList',{needToken:false,data}).then(res=>{
			let {rows,totalPage}=res;
			if(page==1){
				pageData.totalPage=totalPage;
				pageData.list=rows;
			}else{
				pageData.list.push(...rows)
			}
			loadStatus.value=totalPage>page?'more':'noMore';
		})
	}
	
	function showAddForm(){
		deviceForm.formData={
			name:'',
			iccid:'',
			deviceCode:'',
			productKey:'k0nrte7RMU7',
			deviceName:'',
			deviceSecret:''
		}
		proxy.$refs.addFormRef.show()
	}
	
	function closeAddForm(){
		proxy.$refs.addFormRef.hide()
	}
	
	function confirmAddForm(){
		let {formData,inputs}=deviceForm;
		for(let i=0,len=inputs.length;i<len;i++){
			let input=inputs[i];
			if(!input.require){
				continue;
			}
			if(!Util.notNull(formData[input.key])){
				Util.showToast(`请输入${input.name}`);
				return;
			}
		}
		Util.ajaxPost('/api/blDevice/add',{needToken:false,data:formData,json:true}).then(res=>{
			Util.showToast('新增设备成功!');
			proxy.$refs.addFormRef.hide();
			pageData.page=1;
			getDeviceList()
		},err=>{
			Util.showToast('新增设备失败，请重试!');
		})
	}
	
	onLoad(()=>{
		getDeviceList()
	});
	
	onReachBottom(()=>{
		let {page,totalPage}=pageData;
		if(totalPage>page){
			pageData.page++;
			getDeviceList();
		}
	});
</script>

<style>
	
</style>
